<template>
	<!-- 编辑资料 -->
	<view class="">
		<view class="font">
			<u--form labelPosition="left" :model="editFrom" ref="editFrom" labelWidth="100" :rules="rules">
				<view class="bg-white p-2">
					<u-form-item label="头像" prop="userphoto" borderBottom>
						<view class="flex justify-end content-end head_img">
							<u-upload
								:fileList="fileList"
								@oversize="oversize"
								@afterRead="afterRead"
								@delete="deletePic"
								name="orcode_img"
								:maxCount="1"
								:max-size="600 * 1024"
								upload-text="单张图片大小不超过600K"
							>
								<image src="/static/img2/my/default_headimg.png" mode="widthFix" style="width:70rpx;height: 70rpx;"></image>
							</u-upload>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="昵称" prop="nickname" borderBottom>
						<u--input v-model="editFrom.nickname" maxlength="50" border="none" placeholder="请填写" disabledColor="#ffffff"></u--input>
					</u-form-item>
					<u-form-item label="账号" prop="username" borderBottom>
						<u--input v-model="editFrom.username" maxlength="50" border="none" placeholder="请填写" disabled disabledColor="#ffffff"></u--input>
					</u-form-item>
					<u-form-item label="手机号" prop="phone" borderBottom>
						<u--input v-model="editFrom.phone" maxlength="11" border="none" placeholder="请填写" disabled disabledColor="#ffffff"></u--input>
					</u-form-item>
					<u-form-item label="邮箱" prop="mail"><u--input v-model="editFrom.mail" maxlength="30" border="none" placeholder="请填写"></u--input></u-form-item>
					<!-- <u-form-item label="密码" prop="password">
						<u--input v-model="editFrom.password" maxlength="14" border="none" placeholder="请设置"></u--input>
					</u-form-item> -->
				</view>
				<view class="bg-white p-2 mt-2">
					<u-form-item label="企业信息" prop="business_company" borderBottom>
						<u--input v-model="editFrom.business_company" disabled disabledColor="#fff" border="none" placeholder="还未认证企业"></u--input>
					</u-form-item>
					<u-form-item label="我的职责" prop="business_post" borderBottom>
						<u--input v-model="editFrom.business_post" border="none" placeholder="请填写"></u--input>
					</u-form-item>
					<u-form-item label="我的关注" prop="follow" :borderBottom="editFrom.parent_id == 0 && editFrom.audit == 1 ? true : false">
						<u--input v-model="editFrom.follow" border="none" placeholder="请填写"></u--input>
					</u-form-item>
					<u-form-item label="识别码" prop="company_code" v-if="editFrom.parent_id == 0 && editFrom.audit == 1">
						<u--input v-model="editFrom.company_code" border="none" placeholder="请填写"></u--input>
					</u-form-item>
				</view>
			</u--form>
			<view class="btn_box px-2 py-2"><button class="btn h6 text-white" @click="putUserInfo" :loading="loading">保存资料</button></view>
		</view>
	</view>
</template>

<script>
import { uploadImage } from '@/api/common.js';
import { getUserMember, editUserMember } from '@/api/my/userinfo.js';
export default {
	data() {
		return {
			editFrom: {
				userphoto: '',
				nickname: '',
				username: '',
				phone: '',
				mail: '',
				// password: '',
				business_company: '',
				business_post: '',
				follow: '',
				company_code: '' //识别码
			},
			loading: false,
			rules: {
				// userphoto: [
				// 	{
				// 		type: 'string',
				// 		required: true,
				// 		message: '请上传头像',
				// 		trigger: ['blur', 'change']
				// 	}
				// ],
				nickname: [
					{
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					}
				],
				// username: [
				// 	{
				// 		type: 'string',
				// 		required: true,
				// 		message: '请填写用户名',
				// 		trigger: ['blur', 'change']
				// 	}
				// ],
				// phone: [
				// 	{
				// 		type: 'string',
				// 		required: true,
				// 		message: '请填写手机号',
				// 		trigger: ['blur', 'change']
				// 	},
				// 	{
				// 		message: '请填写11位手机号',
				// 		pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
				// 		trigger: ['blur']
				// 	}
				// ],
				mail: [
					{
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					},
					{
						message: '请填写正确的邮箱',
						pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
						trigger: ['blur']
					}
				]
				// company_code: [
				// 	{
				// 		type: 'string',
				// 		required: false,
				// 		message: '识别码应为字母，数字组合，6-8位',
				// 		pattern: /^[0-9A-Za-z]{6,8}$/,
				// 		trigger: ['blur', 'change']
				// 	}
				// ]
				// password: [
				// 	{
				// 		type: 'string',
				// 		required: true,
				// 		message: '请设置密码',
				// 		trigger: ['blur', 'change']
				// 	},
				// 	{
				// 		message: '密码应为字母，数字组合，6-14位',
				// 		pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/,
				// 		trigger: ['blur']
				// 	}
				// ]
			},
			fileList: [] //头像
		};
	},
	onReady() {
		this.$refs.editFrom.setRules(this.rules);
	},
	onLoad() {
		this.getInfo();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		// 删除头像
		deletePic(event) {
			// console.log(event);
			this.fileList.splice(0, 1);
			this.editFrom.userphoto = '';
		},
		// 新增头像
		async afterRead(event) {
			// console.log(event);
			uploadImage(event)
				.then(res => {
					if (res.code == 0) {
						this.fileList.push({ url: res.img });
						this.editFrom.userphoto = this.fileList[0].url;
						// this.putUserInfo();
						// console.log(this.editFrom);
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('头像上传失败');
				});
		},
		// 获取个人资料
		getInfo() {
			getUserMember(uni.getStorageSync('userInfo').token || '')
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.editFrom = res.data;
						if (res.data && res.data.userphoto) {
							this.fileList.push({ url: res.data.userphoto });
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取个人资料失败', err);
				});
		},
		// 编辑资料
		putUserInfo() {
			this.$refs.editFrom
				.validate()
				.then(res => {
					this.loading = true;
					let msg = {
						token: uni.getStorageSync('userInfo').token || '',
						...this.editFrom
					};
					editUserMember(msg)
						.then(res => {
							// console.log(res);
							if (res.code == 0) {
								uni.$u.toast(res.msg);
								setTimeout(() => {
									this.loading = false;
									uni.navigateTo({
										url: '/pages/my/index'
									});
								}, 1000);
							} else {
								uni.$u.toast(res.msg);
								this.loading = false;
							}
						})
						.catch(err => {
							this.loading = false;
							console.log('修改资料失败', err);
						});
				})
				.catch(errors => {
					uni.$u.toast('请正确填写您的资料');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.btn_box {
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #f2f2f2;
	z-index: 999;
	.btn {
		height: 90rpx;
		line-height: 90rpx;
		background: $color14;
		border-radius: 14rpx;
	}
}
::v-deep .head_img .u-upload__wrap__preview__image {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__button {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__wrap__preview__image {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__wrap__preview {
	margin: 0;
}
::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}
::v-deep .uni-input-placeholder {
	text-align: right;
}
::v-deep .u-form-item__body__right__message {
	text-align: right;
}
::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
	padding-right: 20rpx;
}
::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}
::v-deep .u-upload__wrap {
	justify-content: flex-end;
}
</style>
